<template>
	<view id="body">
		<!-- 商品信息 -->
		<view class="cartlist">
			<view class="order" v-for="(item,index) in cartList" :key="index">
				<!-- 订单信息 -->
				<!-- 单选框 -->
				<view class="dxk"> 
					<u-checkbox-group>
						<u-checkbox @change="checkboxChange(index)" :checked="allchlik">
						</u-checkbox>
					</u-checkbox-group>  
				</view>
				<!-- 订单图片 -->
				<view class="cartImg">
					<image :src="item.indexImg" class="cartImg-image"></image>
				</view>
				<!-- 标题 -->
				<view class="title">
					<text>{{item.title}}</text>
				</view>
				<!-- 数量 -->
				<view class="num1">
					<u-number-box :max="item.num" v-model="item.buyusernum" @change="num1" :name="index"></u-number-box>
				</view>
				<!-- 价格 -->
				<view class="price" style="color:#2979ff">
					<text>单价:   </text>
					<text>{{item.price}}元</text>
				</view>
				<!-- 删除按钮 -->
				<view class="tubiao" @click="deletetb(index)">
					<u-icon name="trash"  size="32"></u-icon>
				</view>
			</view>
			<!-- 数据为空 -->
			<view class="datanull" v-if="datafalge">
				<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
				</u-empty>
			</view>
			<!-- 页面底部加载动画 -->
			<view class="lad" v-if="!datafalge">
				<u-loadmore :status="status" :line="line" :nomoreText="nomoreText" /> 
			</view>
		</view>
		<!-- 底部结算 -->
		<view class="cartbottom">
			<!-- 全选单选框 -->
			<view class="dxk2">
				<u-checkbox-group>
					<u-checkbox @change="dxk()" :checked="allchlik">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 全选文字 -->
			<view class="bmtext">
				<text>全选</text>
			</view>
			<!-- 价格 -->
			<view class="priceall">
				<text style="color: #2979ff;">总价:   {{jstotal}}元</text>
			</view>
			<view class="jiesuan" @click="jiesuan">
				<text class="jiesuan-text">结算({{jsnum}})</text>
			</view>
		</view>
		<!-- 购买数量模态框 -->
		<view class="nummodel" >
			<u-modal :show="show" :showConfirmButton="false" :closeOnClickOverlay="true" @close="close" title="收货信息">
				<view class="model">
					<!-- 地址 -->
					<view class="v-name">
						<text class="t-icon t-icon-yonghu" style="width: 48rpx; height: 48rpx; float: left;"></text>
						<text class="mname">联系人</text> 
						<input placeholder="输入姓名" class="name-input" v-model="name"/>
					</view>
					<view class="line" style="margin-top: 0rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
					<view class="v-phone" style="margin-top: 48rpx;">
						<text class="t-icon t-icon-shouji" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="mphone">联系电话</text>
						<input placeholder="输入电话" class="phone-input" v-model="phone"/>
					</view>
					<view class="line" style="margin-top: 0rpx;">
						<u-line color="#2979ff"></u-line> 
					</view>
					<view class="v-address" style="margin-top: 48rpx;">
						<text class="t-icon t-icon-dizhi" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="maddress">联系地址</text>
						<input placeholder="输入地址信息" class="address-input" v-model="address"/>
					</view>
					<view class="line" style="margin-top: 0rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
					<!-- 立即购买购买 -->
					<view class="buybutton12" @click="buyclick" style="margin-top: 84rpx; ">
						<text class="buybutton-text">确定</text>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import currency from 'currency.js'
	import bignumber from "bignumber.js"
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				value: 1,
				checkboxList1: [{
				    disabled: false
				},
				], 
				cartList:[],//购物车列表
				allchlik:false,//全选
				total:0,//总价
				status:"",
				line:true,
				nomoreText:"没有更多了",
				datafalge:false,//购物车为空显示标记
				jsnum:0,//结算的商品个数
				jstotal:0,//总价
				name:"",//联系人姓名
				phone:"",//联系人
				address:"",//地址信息
				show:false,
				nongsukeall:{},//订单总表
			}
		},  
		onShow(){
			this.allchlik = false
			//获取缓存中的购物车数据
			var list = uni.getStorageSync("cartlist")
			 if(list.length == 0 ){
				 this.status = "nomore" 
				 this.datafalge = true
			 }else{
				 list = JSON.parse(list) 
				for(var i = 0;i<list.length;i++){
					list[i].flag = false //添加是否选中的属性
					list[i].buyusernum = 1 //添加商品默认个数属性
				}
				this.cartList = list
				this.datafalge = false
				this.jstotal = 0
				this.jsnum = 0
				
			 }
			console.log("结算的购物车缓存数据是："+ JSON.stringify(list))
		},
		methods:{ 
			// 商品单选框
			checkboxChange(index){ 
				this.jsnum = 0//重置个数
				for(var i = 0;i<this.cartList.length;i++){
					if(i == index){
						this.cartList[i].flag = ! this.cartList[i].flag //选中,取消
						//是否加入结算总数
						if(this.cartList[i].flag){
							this.jsnum ++
						}
					}else{
						if(this.cartList[i].flag){
							this.jsnum ++
						}
					}
					
				}
				//价格
				this.jstotal = 0
				for(var i = 0;i<this.cartList.length;i++){
					if(this.cartList[i].flag){
						this.jstotal = currency(this.jstotal).add(currency(this.cartList[i].price).multiply(this.cartList[i].buyusernum))
					}
				}
				console.log(index)
			},
			// 删除事件
			deletetb(index){
			    var newarray = []
				for(var i = 0;i<this.cartList.length;i++){
					if(i == index){
						continue
					}else{
						newarray.push(this.cartList[i])
					}
				}
				this.cartList = newarray
				if(this.cartList.length == 0){
					this.datafalge = true
				}
				//重置缓存
				uni.setStorageSync("cartlist",JSON.stringify(newarray))
				//重置价格
				this.jstotal = 0
				this.jsnum = 0
				//改变总价
				for(var i = 0;i<this.cartList.length;i++){ 
					if(this.cartList[i].flag){
						this.jstotal = currency(this.jstotal).add(currency(this.cartList[i].price).multiply(this.cartList[i].num))
						this.jsnum += 1
					}
				}
			},
			//商品个数增加减少事件
			num1(e){
				console.log("点击增加减少的商品个数是："+ ":"+JSON.stringify(e)) 
				if(e.value>this.cartList[e.name].num){
					uni.$u.toast("购买数量不能大于商品数量")
					return
				}	
				//改变对应商品的数量
				this.cartList[e.name].buyusernum = e.value
				//改变总价
				if(this.cartList[e.name].flag){
					this.jstotal = 0
					for(var i = 0;i<this.cartList.length;i++){ 
						if(this.cartList[i].flag){
							this.jstotal = currency(this.jstotal).add(currency(this.cartList[i].price).multiply(this.cartList[i].buyusernum))
						}
					}
				}
				
			},
			//全选
			dxk(){
				//单选框样式
				this.allchlik = !this.allchlik
				//取消选中清空价格
				if(this.allchlik == false){
					this.jstotal = 0
					this.jsnum = 0
					//改变商品为未选中状态
					for(var i = 0;i<this.cartList.length;i++){
						this.cartList[i].flag=false
					}
					return
				}
				//改变复选框是否选中，和价格
				this.jstotal = 0
				this.jsnum = 0
				//改变选中
				for(var i = 0;i<this.cartList.length;i++){
					this.cartList[i].flag=true
				}
				//改变总价
				for(var i = 0;i<this.cartList.length;i++){ 
					if(this.cartList[i].flag){
						this.jstotal = currency(this.jstotal).add(currency(this.cartList[i].price).multiply(this.cartList[i].buyusernum))
						this.jsnum += 1
					}
				}
			},
			jiesuan(){
				var that = this
				if(!uni.getStorageSync("user")){
					uni.$u.toast("登录后才能购买商品喔")
					return
				}
				var user = JSON.parse(uni.getStorageSync("user"))
				var T = this.cartList
				//订单详细内容表
				var orderarrlenght = 0//选中的购物车商品数量
				var orderlist = []//助农服务总表里的商品内容订单集合
				for(var i = 0; i < T.length; i++){
					if(T[i].flag){
						var data = {
							id:"",
							title:"",
							content:"",
							goodsid:"",
							goodprice:"",
							goodtype:"",
							buynum:"",
							totalprice:"",
							state:0,
							issuseuserid:user.id,
							imglist:"",
							indeximg:"",
							belongid:"",//所属上级订单
						}
							data.title = T[i].title
							data.content = T[i].content
							data.goodsid = T[i].id
							data.goodprice = T[i].price
							data.goodtype = T[i].type +1
							data.buynum = T[i].buyusernum
							var num2 = bignumber(T[i].price)
							data.totalprice = num2.times(T[i].buyusernum)
							var indeximg = ""
							if(T[i].orderImg){
								var A = T[i].orderImg.split(",")
								indeximg = A[0]
							}
							data.imglist = T[i].orderImg
							data.indeximg = indeximg
							orderlist.push(data)
							orderarrlenght +=1
					}
				}
				if(orderarrlenght < 1){
					uni.$u.toast("必须要有选中商品才能结算喔")
					return
				}
				//封装助农服务总订单表
				var rederstr = JSON.stringify(orderlist)
				var nongsuke = {
					id:"",
					issueid:user.id,
					title:"助农服务商品订单:",
					orderlist:rederstr,//包含的内容订单id
					buyname:that.name,
					buyphone:that.phone,
					buyaddress:that.address,
					price:that.jstotal,
					state:0,
				}
				this.nongsukeall = nongsuke
				this.show = true
			},
			//购买
			buyclick(){
				uni.showLoading({
				title: '正在创建订单中'
				})
				let str = /^\+?[1-9][0-9]*$/
				if(! uni.getStorageSync("user")){
					uni.$u.toast("登录后才能购买喔")
					return
				}else if(this.name == "" | this.name.length < 1){
					uni.$u.toast("联系人姓名不能为空")
					return
				}else if(str.test(this.phone) == false){
					uni.$u.toast("手机号格式不正确")
					return
				}else if(this.address == "" | this.address.length < 1){
					uni.$u.toast("地址不能为空")
					return
				}
				this.nongsukeall.buyname = this.name
				this.nongsukeall.buyphone = this.phone
				this.nongsukeall.buyaddress = this.address
				console.log("请求数据是："+JSON.stringify(this.nongsukeall))
				uni.request({
					url:http+"/nongsukellid",
					method:"POST",
					data:this.nongsukeall,
					complete:(res)=>{
						if(res.data.code == 20011){
							uni.hideLoading()
							uni.$u.toast("订单创建成功，快去付款吧")
							this.show = false
							uni.navigateTo({
								url:"/shoppingcart/shoppingAllInfo?data="+JSON.stringify(res.data.date)
							})
						}else{
							uni.$u.toast("订单创建失败")
							uni.hideLoading()
						}
						uni.hideLoading()
					}
				})
			},
			close(){
				this.nongsukeall = {}
				this.show = false
			}
		}
	}
</script> 

<style scoped>
	@import url("../static/css/componentsCss/cart/shoppingcart.css");
</style>